<template>
    <div class="main-content">
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem href="#">账号</BreadcrumbItem>
                <BreadcrumbItem href="#">账号信息</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <div class="layout-content">
                <div class="layout-content-main">
                    <div class="layout-content-main">
                        <div class="header-title">
                            <span style="font-size:16px;color:#2d8cf0;">代理商信息</span>
                        </div>
                        <p class="agent-info">
                            <span class="agent-left">公司名称</span>
                            <span>{{$store.state.user.company}}</span>
                        </p>
                        <p class="agent-info">
                            <span class="agent-left">营业执照注册号</span>
                            <span>{{$store.state.user.business_license_num}}</span>
                        </p>
                        <p class="agent-info">
                            <span class="agent-left">营业执照图片</span>
                            <span class="agent-img">
                                    <img :src="'http://api.c.topeffects.cn/c/data/upload/license/'+$store.state.user.business_license_img_url"></img>
                                </span>
                        </p>
                        <p class="agent-info">
                            <span class="agent-left">公司地址</span>
                            <span>{{$store.state.user.address}}</span>
                        </p>
                    </div>
                    <div class="layout-bottom">
                        <div class="bottom-title">
                            <span style="font-size:16px;color:#2d8cf0;">联系人信息</span>
                        </div>
                        <div class="bottom-main">
                            <p class="agent-info">
                                <span class="agent-left">注册邮箱</span>
                                <span>{{$store.state.user.email}}</span>
                            </p>
                            <p class="agent-info">
                                <span class="agent-left">联系人姓名</span>
                                <span>{{$store.state.user.name}}</span>
                            </p>
                            <p class="agent-info">
                                <span class="agent-left">手机号码</span>
                                <span>{{$store.state.user.phone}}</span>
                            </p>
                            <p class="agent-info">
                                <span class="agent-left">QQ号码</span>
                                <span>{{$store.state.user.qq}}</span>
                            </p>
                            <!-- <div class="bottom-button">
                                                <Button type="primary" size="large" long>编辑</Button>
                                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </Card>
    </div>
</template>
<script>
    export default {
        data() {
            return {}
        }
    }
</script>
<style lang="stylus">
.agent-info {
    margin-bottom: 10px;
    vertical-align: top;
}

.agent-left {
    display: inline-block;
    text-align: right;
    width: 120px;
    margin-right: 20px;
    vertical-align: top;
    font-weight: bold;
}

.agent-img {
    display: inline-block;
    width: 143px;
    height: 200px;
    border: 1px solid #e4dede;
}

.agent-img img {
    width: 100%;
    height: 100%;
}

.layout-content-main {
    padding-bottom: 30px;
}

.bottom-title, .header-title {
    padding-bottom: 10px;
    padding-left: 10px;
    margin: 0 10px 10px;
}

.bottom-button {
    width: 120px;
    margin: 30px 0 0 10px;
}
</style>
